<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            background: pink;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    let Vdom={
        tag:'div',
        props:{
            class:'box',
            style:{color:'red',fontSize:'12px'}       
         },
        child:[
            {
                tag:'p',
                props:{class:'active'},
                child:['首页']
            },
            {
                tag:'p',
                props:null,
                child:['新闻']
            },
            {
                tag:'p',
                props:null,
                child:['案例']
            }
        ]
    }
    function $(sel){return document.querySelector(sel)}
    function gets(sel){return [...document.querySelectorAll(sel)]}
    // let {tag,props,child,}=Vdom;

    // var div =document.createElement(tag)
    //     div.classList.add(props.class);
    //     $('body').appendChild(div);
    // child.forEach(function(item,index){
    //     let {tag:q,props:w,child:e}=item;
    //     var p=document.createElement(q);
    //         p.innerHTML=e;
    //     $('.box').appendChild(p);
    //     gets('.box p').forEach(function(item,index){
    //         item.onclick=function(){
    //         gets('.box p').forEach(function(ite,ind){
    //             ite.classList.remove(w.class)
    //         })
    //         item.classList.add(w.class)
    //         } 
    //     })
    // })
    // function createRdom(Vdom){
    //     let {tag,props,child}=Vdom;

    //     let Rdom=document.createElement(tag)
    //     if(props){
    //         for(let key in props){
    //             if(typeof props[key]==='string'){
    //                 Rdom.setAttribute(key,props[key])
    //             }
    //             else{
    //                 var val='';
    //                 for(let k in props[key]){
    //                     val+=k+':'+props[key][k]+';'
    //                 }
    //                 Rdom.setAttribute(key,val)
    //             }
    //         }
    //     }
    //     if(child){
    //         for(let i=0;i<child.length;i++){
    //             if(typeof child[i]==='string'){
    //                 let textnode=document.createTextNode(child[i])
    //                 Rdom.appendChild(textnode)
    //             }
    //             else{
    //                 Rdom.appendChild(createRdom(child[i]))

    //             }
    //         }
    //     }
    //     return Rdom;
    // }
    // $('body').appendChild(createRdom(Vdom)) 

    // // let obj={name:"tom",age:21}
    // // console.log(obj)
    // // let {toString}=obj;
    // // console.log(toString)

    // let str="abc";
    // let [a,b,e]=str;
    // let {1:q}=str;
    // console.log(q)
    // console.log(e)

    // let arr=[1,2,3,4];
    // let brr=[];
    // brr=[...arr]
    // console.log(brr)
    // let dat=[[1,2,3],['a','b']]
    // let mydat=[...dat[1]]
    // console.log(mydat)

    // function gets(sel){return document.querySelectorAll(sel)}
    // let obj={
    //     name:'aaa',
    //     age:21,
    // }
    // let bbj={...obj}
    // console.log(bbj)
    // let str="asdfghjkl";
    // let {indexOf,length,slice}=str;
    // console.log(indexOf)
    // console.log(length);
    // console.log(slice)
    // slice(2,3)

    let obj={
        name:'tim',
        say(){
            return this.name
        }
    }

    function aa(age,height,weight,color){
        console.log(age)
        console.log(height)
        console.log(weight)
        console.log(color)
        console.log(this)
    }
    // aa.call(obj,23,178,65,"red")//第二个参数往后都是一个个参数
    aa.apply(obj,[23,178,65,"red"])//第二个参数是一个数组，
    //1.必须是函数才能用 call和apply
    //2.call的第一个参数 板顶是this 的指向
    //3.call和apply的第二个参数
    let bbj={
        age:18,
        say(){
            return this.age
        }
    }
    function cc(a,b,c){
        console.log(this)
        console.log(a,b,c)
    }
    let f=cc.bind(bbj)//此时 cc的this指向已经绑定了bbj 但是cc并没有被调用 需要哇一个变量来承接 
    f(2,3,4)//同时在f这传参 才能调用这个cc

    //箭头函数
    let aaa=(a,b)=>{
        console.log(a+b)
    };
    aaa(1,2)
    let ccc=a=>{
        console.log(a+3)
    }
    ccc(3)

    class A{
        constructor(width,height,font){
            this.width=width;
            this.height=height;
            this.font=font;
        }
        say(){
            return this.width+this.font
        }
    }
    let a1=new A('12px','24px','微软雅黑')
    console.log(a1.say())


    class Q{
        constructor(){
            this.name="zhangsan"
        }
        say(){
            return this.name
        }
    }
    class W extends Q{//ES6继承的语法
        constructor(age){
            super()//指向的父类的构造函数
            this.age=age;
        }
    }
    let z1=new W(34)
    console.log(z1.say())
</script>